<template>
  <div class="create">
    <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>创建小组</span>
      <el-button style="float: right; padding: 3px 0; font-size:18px" type="text" @click="back">返回</el-button>
    </div>
    <div class="content">
       <el-form :model="groupList" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" @submit.native.prevent>
    <el-form-item label="小组名称" prop="groupname">
      <el-input v-model="groupList.groupname" prefix-icon="el-icon-s-management" ></el-input>
    </el-form-item>
    <el-form-item label="小组简介" prop="instruction">
      <el-input type="textarea" v-model="groupList.instruction" placeholder="如：产品设计与研发"></el-input>
    </el-form-item>
       <!-- 照片上传 -->
      <el-tooltip content="若不上传则为默认封面" placement="left">
        <el-form-item label="封面">
      <div class="cropper-app">

        <el-upload action="#"
          class="btn"
          drag
          :auto-upload="true"
          :show-file-list="false"
          :on-change="handleCrop"
          :before-upload="beforeAvatarUpload"
        >

        <el-button plain class="img-btn" v-if="!loadingtext"  size="mini">添加封面</el-button>
        <img
        class="Group-img"
        v-if="loadingtext"
        title="点击更换封面"
          style="width: 100px; height: 100px"
          :src="'data:image/png;base64'+cropperData.iconUrl">
        </el-upload>

    <!-- 剪裁组件弹窗 -->
    <cropperImage
      :dialogVisible="showCropper"
      :cropper-option="cropperOption"
      :file-size="fileSize"
      :cropper-style="cropperStyle"
      @close="showCropper=false"
      @uploadCropper="uploadImg"
    />
  </div>
      </el-form-item>
      </el-tooltip>
    <el-form-item>
      <el-button type="warning" @click="submitForm('ruleForm')">立即创建</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
    </el-form>
      </div>
    </el-card>
    </div>
</template>

<script>
import { addGroup } from '@/utils/api/group.js'
import cropperImage from "@/views/pageIn/mine/components/Copper.vue"
export default {
  name: '',
  props: {},
  components: {
    cropperImage
  },
  data () {
    return {
      cropperData: {},
      showCropper: false, // 显示裁剪弹窗
      canCropper: false,
      loadingtext: false,
      fileSize: 2, // 限制文件上传大小
      formate: new FormData(),
      cropperOption: {
        img: '',
        autoCropWidth: 300,
        autoCropHeight: 180
      },
      cropperStyle: {
        width: '600px',
        height: '300px'
      },
      rules: {
        groupname: [
          { required: true, message: '请输入小组名称', trigger: 'blur' },
          { min: 2, max: 8, message: '小组名称在2-8个字符之间', trigger: 'blur' }
        ],
        instruction: [
          { required: true, message: '请填写小组简介', trigger: 'blur' },
          { min: 5, max: 15, message: '请认真描述一下小组吧(5-15字)', trigger: 'blur' }
        ]
      },
      dialogVisible: false,
      disabled: false,
      groupList: {
        groupname: '', // 小组名称
        instruction: '', // 小组描述
        pic: ''
      },
    }
  },
  created () {
    const hashLocation = sessionStorage.getItem("hashLocation");// 缓存中获取当前页面的路由名称
    const newLocation = hashLocation.split("#/")[1];
    // 注意, 这里使用全路径匹配,在hash模式中,因为地址会携带#,所以页面报告中的url需要重新覆盖一下, 将#去除
    this.$matomo.setCustomUrl("http://39.105.118.190" + "/" + newLocation);// 覆盖页面报告的url，可以自定义页面url，加上本页面路由
    // this.$matomo.trackEvent(shopCode,hashLocation);//事件
    this.$matomo.trackPageView(hashLocation);// 页面名称,可以自定义页面名称
  },
  methods: {
    back () {
      this.$router.push('/page/group')
    },
    handleRemove (file) {
    },
    handlePictureCardPreview (file) {
      this.pic = file.url;
      this.dialogVisible = true;
    },
    handleDownload (file) {
    },
    resetForm (formName) {
      this.$refs[formName].resetFields();
    },
    // 点击弹出剪裁框
    handleCrop (file) {
      this.$nextTick(() => {
        if (this.canCropper) {
          this.cropperOption.img = window.URL.createObjectURL(file.raw)
          this.showCropper = this.canCropper
        }
      })
    },
    // 上传前校验
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2 MB!')
      }
      // 校验通过后显示裁剪框
      this.canCropper = isJPG && isLt2M
      return false
    },
    // 自定义的提交事件
    uploadImg (f, data) {
      const formdata = new FormData()
      formdata.append('pic', f)
      this.loadingtext = true;
      this.cropperData.iconUrl = data
      this.showCropper = false
      this.formate = formdata
    },
    // 创建小组
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          addGroup(this.groupList, this.formate).then(res => {
            this.$notify({
              title: '成功',
              message: '小组创建成功',
              type: 'success'
            });
            this.$router.push('/page/group')
          })
        } else {
          this.$notify.error({
            title: '错误',
            message: '这是一条错误的提示消息'
          });
          return false;
        }
      });
    }
  }
}
</script>

<style lang="less" scoped>
  .create{
    width: 100%;
    height: calc(100vh - 100px);
    .box-card {
      width: 60%;
      height: 100%;
      margin: 0px auto;
    }
  }
  /deep/ .el-textarea__inner {
    display: block;
    resize: none;
    padding: 5px 15px;
    line-height: 1.5;
    box-sizing: border-box;
    width: 100%;
    font-size: inherit;
    color: #606266;
    background-color: #FFF;
    background-image: none;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    height: 80px !important;
}
/deep/ .el-input__prefix, .el-input__suffix {
    position: absolute;
    top: 0;
    height: 100%;
    color: rgb(230, 117, 97);
    text-align: center;
    font-size: 20px;
}
.url{
  -webkit-appearance: none;
    background-color: #FFF;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
}
.cropper-app  {
    /deep/ .el-dialog{
    width: max-content;
    max-width: 860px;
    height: 520px;
    }
    /deep/ .el-image__inner {
      overflow: hidden;
      border-radius: 6px;
    }
        .img-btn{
          width: 100%;
          height: 100%;
          font-size: 28px;
          color: #ddd;
    }
    .img-btn:hover{
      opacity: 1;
      transition: 1.5s;
    }
    .Group-img{
      width: 100%!important;
      height: 100%!important;
    }
  }

.clearfix{
  font-size: 26px;
}
</style>
